<template>
  <div id="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

const chart = ref(null);

const drawShape = () => {
  const leftShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topYAxis, bottomYAxis, xAxis } = shape;
      const WIDTH = 30; // 增加柱体宽度
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [xAxis - WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p2 = [xAxis - WIDTH, bottomYAxis];
      const p3 = [xAxis, bottomYAxis];
      const p4 = [xAxis, topYAxis];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    },
  });

  const rightShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topYAxis, bottomYAxis, xAxis } = shape;
      const WIDTH = 30; // 增加柱体宽度
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [xAxis, topYAxis];
      const p2 = [xAxis, bottomYAxis];
      const p3 = [xAxis + WIDTH, bottomYAxis];
      const p4 = [xAxis + WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    },
  });

  const topShape = echarts.graphic.extendShape({
    buildPath(ctx, shape) {
      const { topYAxis, xAxis } = shape;
      const WIDTH = 30; // 增加柱体宽度
      const OBLIQUE_ANGLE_HEIGHT = 3.6;
      const p1 = [xAxis, topYAxis];
      const p2 = [xAxis + WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];
      const p3 = [xAxis, topYAxis - OBLIQUE_ANGLE_HEIGHT * 2];
      const p4 = [xAxis - WIDTH, topYAxis - OBLIQUE_ANGLE_HEIGHT];

      ctx.moveTo(p1[0], p1[1]);
      ctx.lineTo(p2[0], p2[1]);
      ctx.lineTo(p3[0], p3[1]);
      ctx.lineTo(p4[0], p4[1]);
      ctx.closePath();
    },
  });

  echarts.graphic.registerShape("leftShape", leftShape);
  echarts.graphic.registerShape("rightShape", rightShape);
  echarts.graphic.registerShape("topShape", topShape);
  
  initChart();
};

const initChart = () => {
  const myChart = echarts.init(chart.value);
  const levels = [
    { value: 20, color: '#cc99ff',colors:'#e5ccff', label: '综合：20人' },
    { value: 5, color: '#ff9999',colors:'#ffcccc', label: '信息技术：5人' },
    { value: 20, color: '#d9d9d9',colors:'#f2f2f2', label: '销售：20人' },
    { value: 20, color: '#99cc99',colors:'#bbddbb', label: '理赔：20人' },
    { value: 20, color: '#99ccff',colors:'#cce5ff', label: '承保：20人' },
    { value: 20, color: '#ffcc66',colors:'#ffdd99', label: '财务：20人' },
    { value: 20, color: '#ff3333',colors:'#ffcce6', label: '财险：20人' },
    { value: 30, color: '#66cc66',colors:'#9fdf9f', label: '人身险：30人' },
  ];

  myChart.resize({
    height:370,
    width:300
  })
  myChart.setOption({
    grid: {
        // left: '10%',  // 左边距
        right: '45%', // 右边距
        // top: '10%',   // 上边距
        // bottom: '10%' // 下边距
    },
    title: {
      text: '专业人员数',
      left: 'left',
      textStyle: {
        fontSize: 14,
      },
    },
    xAxis: { type: "category", data: ['总人数'], axisLabel:{color:"#222",fontSize: 11,}},
    yAxis: { type: "value", max: 155, axisLabel: {color: "#222"},splitLine:{show: false}},
    
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        type: "custom",
        renderItem(params, api) {
          const xAxis = api.coord([api.value(0), 0])[0];
          let currentYAxis = api.coord([0, 0])[1];

          const layers = levels.map((level, index) => {
            const bottomYAxis = currentYAxis; // 当前层的底部
            const topYAxis = bottomYAxis - api.size([0, level.value])[1]; // 当前层的顶部
            currentYAxis = topYAxis; // 更新 currentYAxis 为下一层的底部

            const shape = {
              topYAxis,
              bottomYAxis,
              xAxis,
            };

            const children = [
              {
                type: "leftShape",
                shape,
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: level.color },
                    { offset: 0.5, color: level.colors },
                  ]),
                },
              },
              {
                type: "rightShape",
                shape,
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 3, [
                    { offset: 0, color: level.color },
                    { offset: 1, color: level.colors },
                  ]),
                },
              },
              {
                type: "text",
                style: {
                  text: level.label,
                  x: xAxis + 40,
                  y: (topYAxis + bottomYAxis) / 2,
                  textAlign: 'left',
                  fontSize: 12,
                  color: '#333',
                },
              },
            ];

            // 仅为最顶部的色块绘制 topShape
            // if (index === 0) {
              children.push({
                type: "topShape",
                shape,
                style: {
                  fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: level.color },
                    { offset: 0.5, color: level.colors },
                  ]),
                },
              });
            // }
            
            return {
              type: "group",
              children,
            };
          });

          return { type: "group", children: layers };
        },
        data: [[135, 1]],
        barWidth: '60%',
      },
    ],


  });
};

onMounted(() => {
  drawShape();
});
</script>

<style scoped>
#chart {
  width: 100%;
  height: 300px;
}
</style>
